<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#head{
				height:50px;
				background-color:white; 
				color:black;
				text-align:center;
				line-height:50px;
			}
			#head .head{
				height:50px;
				width:1450px;
				background-color:black;
				margin:auto;
			}
			.list{
				list-style:none;
				width:1450px;
				height:50px;
				
			}
			.list .item{
				float:left;
				width:240px;
				height:50px;
				text-align:center;
				line-height:50px;
			}
			.active{
				color:red;
			}
			a{
				display:block;
				width:240px;
				height:50px;
				background-color:black;
				text-decoration:none;
				color:white;
			}
			a:hover{
				color:red;
			}
			#banner{
				height:500px;
				width:100%;
		        background-image:url(img/pic-1.jpg);
			}
			#body1{
				height:200px;
				background-color:floralwhite;
			}
			.body1{
				height:150px;
				width:1450px;
				background-color:red;
				margin: 25px auto;
			}
			.body1-1,.body1-2,.body1-3,.body1-4,.body1-5,.body1-6{
				height:110px;
				width:200px;
				margin:20px;
				float:left;
				border-right:1px solid black;
			}
			#body1 .body1 .body1-6{
				border:none;
			}
			#body2{
				height:500px;
				background-color:darkgray;
			}
		    #body2 .body2{
				height:450px;
				width:1450px;
				border:1px solid black;
				margin:auto;
			}
			.body2-1,.body2-2,.body2-3{
				height:350px;
				width:426px;
				float:left;
				border:1px solid red;
				margin:20px;
			}
			#p1{
				font-size:1.5em;
				font-family:宋体;
				font-weight:bold;
				color:black;
			}
			#p2{
				clear:both;
				font-size:1.5em;
				font-family:宋体;
				font-weight:bold;
				color:black;
				text-align:center;
			}
			#foot{
				height:200px;
				background-color:black;
			}
		</style>
		<script type="text/javascript" src="jquery-3.4.1.js"></script>
	</head>
	<body>
		<div id="head">
			<div class="head">
				<ul class="list">
					<li class="item"><a href="#" class="active">网站首页</a></li>
					<li class="item"><a href="#">游客留言</a></li>
					<li class="item"><a href="#">历史记录</a></li>
					<li class="item"><a href="#">本地浏览</a></li>
					<li class="item"><a href="#">网络设备</a></li>
					<li class="item"><a href="#">游玩攻略</a></li>
				</ul>
			</div>
		</div>
		<div id="banner"></div>
		<div id="body1">
             <div class="body1">
				 <div class="body1-1"></div>
				 <div class="body1-2"></div>
				 <div class="body1-3"></div>
				 <div class="body1-4"></div>
				 <div class="body1-5"></div>
				 <div class="body1-6"></div>
			 </div>
		</div>
	    <div id="body2">
			<div class="body2">
				<p id="p1">Case:</p>
				<div class="body2-1"></div>
				<div class="body2-2"></div>
				<div class="body2-3"></div>
				<p id="p2">点击查看</p>
			</div>
		</div>
		<div id="foot"></div>
		
		<script type="text/javascript">
			$(".item").click(function(){
				var index = $(this).index();
				
				$("a").removeClass("active");
				
				$("a").eq(index).addClass("active");
			})
		</script>
	</body>
</html>
